<template>
  <div>
    <UploadExcel :on-success="handleSuccess" />
    <el-table
      :data="results"
      style="width: 100% "
    >
      <el-table-column
        v-for="(item, index) in header"
        :key="index"
        :prop="item"
        :label="item"
        width="180"
      />
    </el-table>
  </div>
</template>

<script>
import { transExcel } from '@/utils'
import { importEmployee } from '@/api/employees'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      header: [],
      results: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    handleSuccess({ header, results }) {
      this.header = header
      this.results = results
      // header 标题
      //        ['姓名','手机号']
      // results excel表格的内容
      //        [ {'姓名'：'小张'， '手机号': '13712345678'}, {.....} ]
      console.log(transExcel(results))
      this.doImport(transExcel(results))
    },
    async doImport(data) {
      try {
        // 1.发送数据
        const res = await importEmployee(data)
        // 2.提示成功
        this.$message.success('导入成功')
        // 3.页面回退
        this.$router.back()
        console.log('导入成功', res)
        // 保存数据
      } catch (err) {
        this.$message.error('导入失败')
        console.log('导入失败', err)
      }
    }
  }
}
</script>

<style>

</style>
